<template>
  <div class="galyStyle">
    <el-table
      ref="table"
      class="global-table"
      v-bind="{
        height: '40vh',
        // headerCellStyle: {
        //   color: '#ffffff',
        //   background: '#0793e233'
        // },
        border: true,
        ...toTableConfig.tableConfig
      }"
      :data="tableData"
      v-on="toTableConfig.tableEvents"
    >
      <el-table-column
        v-if="toTableConfig.select"
        type="selection"
        width="55"
        align="center"
        v-bind="{
          ...toTableConfig.selectConfig
        }"
      ></el-table-column>
      <el-table-column
        v-if="toTableConfig.order"
        label="序号"
        type="index"
        align="center"
        width="80"
      ></el-table-column>
      <el-table-column
        v-for="(item, i) of toTableConfig.columnConfigList"
        :key="i"
        v-bind="{
          showOverflowTooltip: showOverflowTooltip,
          ...item
        }"
      >
        <template slot-scope="scope">
          <slot
            v-if="item.slotName"
            :data="scope.row"
            :name="item.slotName"
          ></slot>
          <span v-else-if="item.filter" class="text">
            {{ item.filter(scope.row[item.prop]) }}
          </span>
          <span v-else class="text">
            {{ scope.row[item.prop] | fl_text }}
          </span>
        </template>
      </el-table-column>
      <template v-if="toTableConfig.slotName === 'empty'" slot="empty">
        <slot name="empty"> </slot>
      </template>
    </el-table>
    <div v-if="tableData.length && !toTableConfig.hiddenbtn" class="pagination">
      <!-- <span class="page-info">共{{ total }}条记录 第{{ currentPage }}页</span> -->
      <el-pagination
        v-bind="{
          pageSizes: [10, 20, 50, 80, 100],
          layout: 'total, sizes, prev, pager, next, jumper',
          ...toTableConfig.pageConfig
        }"
        class="global-pagination"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        v-on="{
          'current-change': currentChange,
          'size-change': sizeChange,
          ...toTableConfig.pageEvents
        }"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BaseTable',
  filters: {
    fl_text(val) {
      if (val === '') return '-'
      const res = val ?? '-'
      return res
    }
  },
  props: {
    tableHeight: {
      type: String,
      default: null
    },
    toTableConfig: {
      type: Object,
      default: () => {
        return {
          tableConfig: {},
          tableEvents: {},
          columnConfigList: [],
          pageConfig: {},
          pageEvents: {},
          selectDatas: []
        }
      }
    },
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    },
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 100
    },
    total: {
      type: Number,
      default: 0
    },
    showOverflowTooltip: {
      type: Boolean,
      default: true
    },
    hisTory: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  watch: {
    toTableConfig: {
      handler(newV, oldV) {
        console.log(newV, oldV)
        this.selectEvent()
      },
      deep: true
    }
  },
  methods: {
    checkSelectable: (row) => {
      if (row.incidentStatus === 2) {
        return false
      } else {
        return true
      }
    },
    tableRowClassName() {
      return 'tableRowClassName'
    },
    selectEvent() {
      setTimeout(() => {
        if (
          this.$props.toTableConfig.selectDatas &&
          this.$props.toTableConfig.selectDatas.length
        ) {
          this.$props.toTableConfig.selectDatas.forEach((item) => {
            this.$refs.table.toggleRowSelection(item, true)
          })
        }
      }, 0)
    },
    sizeChange(val) {
      this.$emit('sizeChange', val)
      this.selectEvent()
    },
    currentChange(val) {
      this.$emit('currentChange', val)
      this.selectEvent()
    }
  }
}
</script>

<style lang="scss" scoped>
.pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  // text-align: center;
  padding: 20px 0 0;
  // background: $--background-color-regular;
}
// ::v-deep .el-table tr {
//   background: $--background-color-regular !important;
// }
// ::v-deep .el-table__body-wrapper {
//   background: $--background-color-regular !important;
// }

.page-info {
  font-size: 12px;
  font-weight: 400;
  color: #888f9a;
  line-height: 20px;
}

::v-deep .el-button--small {
  font-size: 14px;
}
.galyStyle {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
</style>
